<template>
    <van-nav-bar :title="productData.name" left-text="返回" left-arrow @click-left="onClickLeft" />

    <van-image width="398" height="260px" :src="productData.img.split(',')[0]" @click="showimg" />
    
    <!-- <van-swipe class="my-swipe">
      <van-swipe-item>
        <img :src="productData.img.split(',')[0]" alt="" width="398" height="300px" @click="showimg">
      </van-swipe-item>
    </van-swipe> -->
    <!-- 设置垂直间距 -->
    <van-row :gutter="[20, 20]">
        <van-col span="12" style="color: red; font-size: 28px; font-weight: 700;">￥{{ productData.price }}</van-col>
        <van-col span="12" style="color:red; font-size: 18px; padding-left: 80px; padding-top: 5px;"><van-icon
                name="fire" />热门商品</van-col>
        <van-col span="24" style="font-size: 18px; font-weight: 700;">{{ productData.name }}</van-col>
    </van-row>
    <van-row justify="center" style="margin-top: 15px; ">
        <van-col span="6" style="color: gray;"><img src="@/assets/fx.png" alt="" width="20px" height="20px">分享</van-col>
        <van-col span="6" style="color: gray;"><van-icon name="star-o" size="20" />收藏</van-col>
        <van-col span="6" style="color: gray;"><van-icon name="gold-coin-o" size="20" />降价通知</van-col>
    </van-row>

    <van-field v-model="fieldValue" is-link readonly label="送至" placeholder="请选择所在地区" @click="show = true" />
    <van-popup v-model:show="show" round position="bottom">
        <van-cascader v-model="cascaderValue" title="请选择所在地区" :options="options" @close="show = false" @finish="onFinish" />
    </van-popup>
    <div class="brief">
        <!--如果后台传过来的数据带有html标签， v-html解决-->
        <div v-html="productData.brief"></div>
        <van-back-top right="3vw" bottom="10vh" />
        <!-- <van-back-top immediate /> -->
    </div>


    <van-action-bar>
        <van-action-bar-icon icon="chat-o" text="客服" @click="onClickIcon" />
        <van-action-bar-icon icon="cart-o" text="购物车" @click="onClickIcon" />
        <van-action-bar-icon icon="shop-o" text="店铺" @click="onClickIcon" />
        <van-action-bar-button type="danger" text="立即购买" @click="onClickButton" />
    </van-action-bar>
</template>
<script setup lang="ts">
import { showToast } from 'vant';
import { ref, onMounted, reactive } from 'vue'
import { showImagePreview } from 'vant';
import { useCascaderAreaData } from '@vant/area-data';
import { productApi } from '@/api';
import { useRoute } from 'vue-router';
const route = useRoute()
const show = ref(false);
const fieldValue = ref('');
const cascaderValue = ref('');
const options = useCascaderAreaData();
const productData = reactive({
    name: '',
    price: 0,
    img: "",
    brief: ''
})
const imgArray = ref([])
const onFinish = ({ selectedOptions }) => {
    show.value = false;
    fieldValue.value = selectedOptions.map((option: any) => option.text).join('/');
};

const id = ref()

onMounted(() => {
    id.value = route.query.categoryId
    console.log(id.value);

    callProductList()
})

const callProductList = () => {
    productApi.select.call({ id: id.value }).then((res: any) => {
        console.log(res);
        productData.name = res[0].name
        productData.img = res[0].img
        productData.price = res[0].price
        productData.brief = res[0].brief
        imgArray.value = res[0].img.split(',')
    })
}

const showimg = () => {
    showImagePreview({
        images: imgArray.value,
        closeable: true
    });
}
const onClickIcon = () => {
    console.log('点击图标');
}
const onClickButton = () => showToast('点击按钮');
const onClickLeft = () => history.back();
</script>
<style scoped>
.van-field {
    margin-top: 40px;
}

.brief {
    border: 1px solid #8c8c8c;
    background: #e1e0e0;
    margin-top: 9px;
    border-radius: 3px;
}

.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
}
/* .van-swipe__track{
    width: 398px;
}
.van-swipe__track .van-swipe-item{
    width: 398px;
} */
</style>
<style>
.van-image-preview__swipe {
    /* height: 260px !important;
    width: 100% !important; */
}
</style>